<template>
  <div class="visitor">
    <n-spin :show="show">
      <div class="table_v">
        <n-data-table
          :columns="columns"
          :data="data"
          :pagination="pagination"
          :row-key="(row) => row.number"
          :loading="false"
        >
          <template #empty>
            <n-empty description="你什么也找不到" size="large">
              <template #extra>
                {{ show == true ? "正在加载数据" : "无数据" }}
              </template>
            </n-empty>
          </template>
        </n-data-table>
      </div>
    </n-spin>
  </div>
  <n-modal v-model:show="showModal">
    <n-card style="width: 600px" :title="name" :bordered="false" size="huge">
      <template #header-extra> 欢迎您进入实验室</template>
      事由选择：<n-select
        v-model:value="params.value"
        :options="options"
        :default-value="options[0].value"
        placeholder="请进行选择事由"
      ></n-select>
      <template #footer>
        <n-button type="info" @click="sign">登记</n-button>
      </template>
    </n-card>
  </n-modal>
</template>

<script>
import { notSignList, visitorSignin } from "@/api/visitor";
import { getThingList } from "@/api/sign.js";
import { NButton, useMessage } from "naive-ui";
import { h, reactive, ref, onMounted, toRefs } from "vue";
import { Toast } from "vant";
// import { useRouter } from "vue-router";
const createColumns = ({ sendMail }) => {
  return [
    {
      title: "序号",
      key: "number",
    },
    {
      title: "部门",
      key: "unitGroup",
    },
    {
      title: "课题组",
      key: "classGroup",
    },
    {
      title: "姓名",
      key: "realName",
    },
    {
      title: "登记",
      key: "actions",
      render(row) {
        return h(
          NButton,
          {
            size: "small",
            onClick: () => sendMail(row),
          },
          { default: () => "登记进入" }
        );
      },
    },
  ];
};
function speckText(str) {
  var url =
    "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=6&text=" +
    encodeURI(str);
  new Audio(url).play();
  //var n = new Audio(url);
  //n.src = url;
  //n.play();
}
export default {
  name: "Vistor",
  setup() {
    // const router = useRouter();
    // const message = useMessage();
    const state = reactive({
      visitor: [],
      options: [],
      name: "",
      show: true,
      params: {
        value: "",
        id: "",
        msg: "",
      },
    });
    let showModal = ref(false);
    const message = useMessage();
    //获取colmuns的列表
    const getcolums = async () => {
      try {
        const { data } = await getThingList();

        data.forEach((item) => {
          state.options.push({ label: item.name, value: item.id });
        });
      } catch {
        message.error("获取事由信息错误！！！", {
          duration: 5000,
          closable: true,
        });
      }
    };
    //获取数据列表
    const getvisitor = async () => {
      try {
        const { data } = await notSignList();

        data.forEach((item, index) => {
          item.number = index + 1;
        });
        state.visitor.push(...data);
        state.show = false;
      } catch {
        message.error("获取访客信息错误！！！", {
          duration: 5000,
          closable: true,
        });
      }
    };
    onMounted(() => {
      getvisitor();
      getcolums();
    });
    //处理更新数据工作
    const refreshdata = () => {
      if (state.visitor.length != 0) {
        state.visitor.forEach((item, index) => {
          if (item.id == state.params.id) {
            state.visitor.splice(index, 1);
          }
        });
      }
    };
    const sign = async () => {
      try {
        if (!state.params.value) {
          Toast.fail("请选择事由");
          return;
        }
        Toast.loading({
          message: "打卡中...",
          forbidClick: true,
        });
        const res = await visitorSignin(state.params);

        if (res.status != 200) {
          message.error(res.msg);
          showModal.value = false;

          return;
        }
        speckText("打卡成功");
        Toast.success("打卡成功");
        refreshdata();
        message.info(res.data);
        showModal.value = false;
      } catch {
        message.error("访客签到程序错误！！！", {
          duration: 5000,
          closable: true,
        });
      }
    };
    return {
      sign,
      ...toRefs(state),
      showModal,
      data: state.visitor,
      columns: createColumns({
        sendMail(row) {
          showModal.value = true;
          state.name = row.realName;
          state.params.id = row.id;
        },
      }),
      pagination: {
        pageSize: 8,
      },
    };
  },
};
</script>
<style lang="scss">
.visitor {
  width: 100%;
  overflow: hidden;
  .table_v {
    width: 90%;
    margin: 20px auto;
    background-color: #fff;
  }
}
</style>
